<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=1226">
    <title>云商城-秒杀</title>
    <!-- 引入图标库-->
    <link href="http://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!--bootstrap-->
    <link rel="stylesheet" th:href="@{/static/resource/css/lib/bootstrap.min.css}"/>
    <!--    引入alibaba iconfont-->
    <link rel="stylesheet" href="//at.alicdn.com/t/font_2608271_v7p87hrx9q.css">

    <!--css-->
    <link rel="stylesheet" th:href="@{/static/resource/css/reset.css}"/>
    <link rel="stylesheet" th:href="@{/static/resource/css/index.css}"/>
    <link rel="stylesheet" th:href="@{/static/resource/css/cart.css}"/>
    <link rel="stylesheet" th:href="@{/static/resource/css/home.css}"/>
    <link rel="stylesheet" th:href="@{/static/resource/css/order.css}"/>
    <link rel="stylesheet" th:href="@{/static/resource/css/common/common.css}"/>
    <link rel="stylesheet" th:href="@{/static/js/directives/css/search.css}"/>
    <link rel="stylesheet" th:href="@{/static/js/directives/css/focusImg.css}"/>
    <link rel="stylesheet" th:href="@{/static/js/directives/css/focusImgMult.css}"/>
    <link rel="stylesheet" th:href="@{/static/js/directives/css/ulBox2.css}"/>
</head>

<style>

    .topbar a:hover{
        color: orange;
    }
    * {
        box-sizing: border-box;
    }

    #container {
        width: 300px;
        height: 42px;
        margin: 0 auto;
    }

    div.search {
        padding: 30px 0;
    }

    form {
        position: relative;
        width: 300px;
        margin: 0 auto;
    }

    input, button {
        border: none;
        outline: none;
    }

    input {
        width: 100%;
        height: 42px;
        padding-left: 13px;
    }

    button {
        height: 42px;
        width: 42px;
        cursor: pointer;
        position: absolute;
    }

    /*搜索框6*/
    .bar6 input {
        border: 2px solid #c5464a;
        border-radius: 5px;
        background: transparent;
        top: 0;
        right: 0;
    }

    .bar6 button {
        background: #c5464a;
        border-radius: 0 5px 5px 0;
        width: 60px;
        top: 0;
        right: 0;
    }

    .bar6 button:before {
        content: "\f002";
        font-family: FontAwesome;
        font-size: 13px;
        color: #F9F0DA;
    }

    .search input {
        height: 42px;
    }

    /*商品css3样式*/

    #productsBox {

        width: 100%;
        height: 726px;

    }

    #products {

        width: 1250px;
        height: 1200px;
        margin: 0 auto;

    }


    ul, ol {
        list-style: none;
    }

    input, button {
        outline: none;
        border: none;
    }

    a {
        text-decoration: none;
    }

    .clearfix::before,
    .clearfix::after {
        content: "";
        height: 0;
        line-height: 0;
        display: block;
        visibility: hidden;
    }

    .clearfix::after {
        clear: both;
    }

    .product li {
        float: left;
        width: 234px;
        height: 246px;
        padding: 34px 0 20px;
        z-index: 1;
        margin-left: 14px;
        margin-bottom: 35px;
        background: #fff;
        -webkit-transition: all .2s linear;
        transition: all .2s linear;
        position: relative;
    }

    .pro-img {
        width: 150px;
        height: 150px;
        margin: 0 auto 18px;
    }

    .pro-img a {
        width: 100%;
        height: 100%;
    }

    .pro-img img {
        display: block;
        width: 100%;
        height: 100%;
    }

    .product li h3 {
        margin: 0 10px;
        font-size: 14px;
        font-weight: 400;
        text-align: center;
    }

    .product li h3 a {
        color: #333;
    }

    .desc {
        margin: 0 10px 10px;
        height: 18px;
        font-size: 12px;
        text-align: center;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        color: #b0b0b0;
    }

    .price {
        font-size: 14px;
        margin: 0 10px 10px;
        text-align: center;
        color: #ff6700;
    }

    .price del {
        color: #b0b0b0;
    }

    .review {
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: 3;
        width: 234px;
        height: 0;
        overflow: hidden;
        font-size: 12px;
        background: #ff6700;
        opacity: 0;
        -webkit-transition: all .2s linear;
        transition: all .2s linear;
    }

    .review a {
        color: #757575;
        display: block;
        padding: 8px 30px;
        outline: 0;
    }

    .review a span {
        display: block;
        margin-bottom: 5px;
        color: #fff;
    }

    .product li:hover {
        -webkit-box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
        -webkit-transform: translate3d(0, -2px, 0);
        transform: translate3d(0, -2px, 0);
    }

    .product li:hover .review {
        opacity: 1;
        height: 76px;
    }


    #searchBox {

        width: 100%;
        height: 100px;


    }

    #searchDiv {

        width: 1226px;
        height: 80px;
        margin: 0 auto;

    }

    /* 控制品牌和分类点击超链接状态改变属性，以便于js选择器进行选择*/
    .disable {
        pointer-events: none;
        background-color: orange;
    }

    /* 下拉框*/

    .dropbtn {
        border: none;
        cursor: pointer;
    }

    .dropdown {
        position: relative;
        display: inline-block;
        z-index: 100;
        margin-left:25px
    }

    .dropdown-content {
        display: none;
        background-color: #f9f9f9;
        min-width: 50px;
        overflow: auto;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        z-index: 1;
    }

    .dropdown-content a {
        color: black;
        text-decoration: none;
        display: block;
    }

    .dropdown a:hover {background-color: #f1f1f1}

    .show {display:block;}
</style>

<body>
<!-- jquery.js angular.js-->
<script th:src="@{/static/resource/lib/jquery.min.js}"></script>
<script th:src="@{/static/resource/lib/angular.js}"></script>

<!--头部工具栏-->
<div class="topbar">
    <div class="container">
        <div class="topbar_nav fl">
            <ul>
                <li><a th:href="@{/web/index/}">首页</a></li>
                <li><a th:href="@{/web/couponsActivity/toCouponsActivity}">领劵中心</a></li>
                <li><a th:href="@{/web/seckill/toSearchSeckillPage}">秒杀</a></li>
                <li><a href="https://github.com/youzhengjie9/cloud-mall">项目链接</a></li>
            </ul>
        </div>
        <div class="topbar_cart fr">
            <a href="/web/cart/tocart">购物车</a>
        </div>
        <div class="topbar_cart fr">
            <a href="/web/order/toOrderPage">我的订单</a>
        </div>
        <div class="topbar_cart fr">
            <a href="/web/seckill/toSeckillSuccessList">秒杀成功订单</a>
        </div>
        <div class="topbar_info fr" style="width:220px">
            <form name="logoutform" th:action="@{/web/logout/logout}" method="post"></form>
            <a class="nav-link" th:href="@{/web/register/toregister}">注册</a>
            <a class="nav-link" sec:authorize="isAnonymous()" th:href="@{/web/login/toLoginPage}">登录</a>
            <a sec:authorize="isAuthenticated()" class="nav-link dropbtn" onclick="myFunction()">[[${username}]]</a>
            <a href="#" onclick="kefu(1)">人工客服</a>
            <div class="dropdown">
                <div id="myDropdown" class="dropdown-content" style="width: 120px;height: 70px">
                    <a th:href="@{/web/center/toBaseInfo}" style="width: 100px;height: 30px;">个人中心</a>
                    <a href="javascript:document.logoutform.submit();" style="width: 100px;height: 30px;">退出登录</a>
                </div>
            </div>
        </div>
    </div>
</div>


<div id="searchBox">

    <div id="searchDiv">
        <!--            搜索框-->
        <div id="container">
            <div class="search bar6">
                <form method="GET" th:action="@{/web/search/toSearchPage}" autocomplete="off">
                    <input type="text" placeholder="请输入您要搜索的内容..." name="text">
                    <button type="submit"></button>
                </form>
            </div>
        </div>

    </div>

</div>


<div class="container">
    <div class="filter_box">
        <div class="filter_list_wrap clearfix">
            <div id="brandClassifyDiv">
                <div id="brands">
                    <dt style="width: 100px;height: 30px;float: left;text-align: center">秒杀商品列表：</dt>

                </div>

            </div>

        </div>
    </div>
</div>



<div id="productsBox">


    <!--    所有商品div-->
    <div id="products">

        <!--        单个商品div-->
        <div class="product" th:each="seckill:${seckills}">
            <ul>
                <li>
                    <div class="pro-img">
                        <a target="_blank" th:href="@{'/web/seckill/seckillDetail/'+${seckill.getSeckillId()}}">
                            <img th:src="@{${seckill.getImg()}}" alt="product">

                        </a>
                    </div>
                    <h3><a href="#" th:text="${seckill.getSeckillName()}"></a></h3>

                    <p class="desc" th:text="${seckill.getSeckillName()}"></p>
                    <p class="price">
                        <span th:text="${seckill.getPrice()}"></span>元
                        <del>19999</del>
                    </p>
                    <div class="review">
                        <a href="#">
                            <span class="msg">秒杀商品</span>
                            <span class="auther">商品假一赔十</span>
                        </a>
                    </div>
                </li>
            </ul>
        </div>
</div>
</div>




<!--            搜索分页-->

<div id="searchPageDiv" style="width: 100%;height: 85px;">

    <div id="searchPage" style="margin:0 auto;width: 277px;height: 33.6px">
        <ul class="pagination">
<!--            上一页-->
            <li th:if="${curPage==1}" class="disabled">
                <a>&laquo;</a>
            </li>

            <li th:if="${curPage>1}">
                <a style="cursor: pointer" th:onclick="prePage([[${curPage}]])">&laquo;</a>
            </li>

            <li th:id="p1" class="active">
                <a style="cursor: pointer" th:onclick="pagechange(1)"  th:text="1"></a>
            </li>


            <li th:each="index:${#numbers.sequence(2, 5)}" th:if="${pagecount>=5}" th:id="'p'+${index}">
                <a style="cursor: pointer" th:onclick="pagechange([[${index}]])"  th:text="${index}"></a>
            </li>

            <li th:id="'p'+${index}" th:each="index:${#numbers.sequence(2, pagecount)}" th:if="${pagecount<5 and pagecount>=2}">
                <a style="cursor: pointer" th:onclick="pagechange([[${index}]])"  th:text="${index}"></a>
            </li>


<!--            下一页-->

            <li th:if="${pagecount<=1}" class="disabled">
                <a>&raquo;</a>
            </li>
            <li th:if="${pagecount>1}">
                <a style="cursor: pointer" th:onclick="nextPage([[${curPage}]])">&raquo;</a>
            </li>

        </ul>

    </div>
</div>

<!--        -->

<br/><br/><br/><br/>

<!--footer-->
<footer class="footer">
    <div class="container">
        <div class="footer_service">
            <ul class="clearfix">
                <li><a href="">1小时快修服务</a></li>
                <li><a href="">7天无理由退货</a></li>
                <li><a href="">30天免费换货</a></li>
                <li><a href="">满200元包邮</a></li>
                <li><a href="">520余家售后网点</a></li>
            </ul>
        </div>

        <div class="footer_link clearfix">
            <dl>
                <dt>帮助中心</dt>
                <dd>购物指南</dd>
                <dd>支付方式</dd>
                <dd>配送方式</dd>
            </dl>
            <dl>
                <dt>帮助中心</dt>
                <dd>购物指南</dd>
                <dd>支付方式</dd>
                <dd>配送方式</dd>
            </dl>
            <dl>
                <dt>帮助中心</dt>
                <dd>购物指南</dd>
                <dd>支付方式</dd>
                <dd>配送方式</dd>
            </dl>
            <dl>
                <dt>帮助中心</dt>
                <dd>购物指南</dd>
                <dd>支付方式</dd>
                <dd>配送方式</dd>
            </dl>
            <dl>
                <dt>帮助中心</dt>
                <dd>购物指南</dd>
                <dd>支付方式</dd>
                <dd>配送方式</dd>
            </dl>
            <dl>
                <dt>帮助中心</dt>
                <dd>购物指南</dd>
                <dd>支付方式</dd>
                <dd>配送方式</dd>
            </dl>

            <div class="footer_contact">
                <p class="phone">18420163207</p>

                <p><span style="">周一至周日 8:00-18:00</span>
                    <span style="display:none;">2月7日至13日服务时间 7:00-18:00</span><br>（仅收市话费）</p>
                <a rel="nofollow" class="btn btn-primary btn-small" href="#">24小时在线客服</a>
            </div>
        </div>

    </div>

    <div class="footer_site">
        <div class="container">
            <div class="cart_log">
                <a href="" title="云商城"></a>
            </div>
            <div>
                <p>云商城项目由本人自己完成,如有不足,请指正！</p>
            </div>
        </div>
    </div>
</footer>


</body>


<script th:inline="javascript">
    //js提交表单
    function submitData() {
        document.getElementById("form").submit();
    }
    /* 点击按钮，下拉菜单在 显示/隐藏 之间切换 */
    function myFunction() {
        document.getElementById("myDropdown").classList.toggle("show");
    }

    // 点击下拉菜单意外区域隐藏
    window.onclick = function(event) {
        if (!event.target.matches('.dropbtn')) {

            var dropdowns = document.getElementsByClassName("dropdown-content");
            var i;
            for (i = 0; i < dropdowns.length; i++) {
                var openDropdown = dropdowns[i];
                if (openDropdown.classList.contains('show')) {
                    openDropdown.classList.remove('show');
                }
            }
        }
    }

    //上一页
    function prePage(pgnum) {


        $.ajax({
            url: "/web/seckill/searchSeckillByCondition",
            data: {
                "from": pgnum-1
            },
            type: "GET",
            success: function (json) {
                document.getElementById('products').innerHTML = ""; //清空所有商品展示
                var html = ''; //拼接商品展示html
                for (var i = 0; i < json.seckills.length; i++) {

                    html += '<div class="product">'
                    html += '<ul><li>';
                    html += '<div class="pro-img">'
                    html+='<a target="_blank" href=\"'+'/web/seckill/seckillDetail/'+json.seckills[i].seckillId+'\">'
                    html += '<img src=\"'+ json.seckills[i].img + '\" alt="product">';
                    html += '</a></div>'
                    html += '<h3><a href="#">' + json.seckills[i].seckillName + '</a></h3>';
                    html += '<p class="desc">' + json.seckills[i].seckillName + '</p>';
                    html += '<p class="price">'

                    html += '<span>' + json.seckills[i].price + '元</span>';
                    html += '<del>' + 19999 + '</del>'
                    html + '</p>';


                    html += '<div class="review"><a href="#"><span class="msg">秒杀商品</span>';

                    html += ' <span class="auther">商品假一赔十</span></a></div>';


                    html += '</div>';

                }

                $('#products').append(html);

                //修改分页bar

                document.getElementById('searchPage').innerHTML=''; //搜索页div清空

                var pageBarHtml='';

                pageBarHtml+='<ul class="pagination">';

                var curPage=json.curPage;
                var pagecount=json.pagecount;


                var curPageGroup=json.curPageGroup;
                var pageGroup=json.pageGroup;

                if(curPage>1)
                {
                    pageBarHtml+='<li><a style="cursor: pointer" onclick=\"'+'prePage('+curPage+')'+'\">&laquo;</a></li>'
                }else {
                    pageBarHtml+='<li class="disabled"><a>&laquo;</a> </li>';
                }

                if(pagecount<=5)
                {
                    var phtml1='';
                    for (var i=0;i<pagecount;i++)
                    {
                        if((i+1)==curPage)
                        {
                            phtml1+='<li class="active" id=\"'+'p'+(i+1)+'\">';
                        }else {
                            phtml1+='<li id=\"'+'p'+(i+1)+'\">';
                        }
                        phtml1+='<a style="cursor: pointer" onclick=\"'+'pagechange('+(i+1)+')'+'\">'+(i+1)+'</a>'

                        phtml1+='</li>'

                    }
                    pageBarHtml+=phtml1;

                }else {
                    var size=5;
                    var start=size*(curPageGroup-1)     //从哪里开始遍历

                    // console.log("start="+start);

                    //分两种情况，如果不是最后一组导航
                    //为了防止最后一组不足5页的情况，我们需要获取最后一组有多少页
                    if(curPageGroup<pageGroup)
                    {
                        var phtml1='';
                        //因为curPageGroup<pageGroup，所以每一组必定有5页
                        //此时end=start+5
                        var end=start+5;
                        // console.log("end="+end)

                        for (var i=start;i<end;i++)
                        {
                            if((i+1)==curPage)
                            {
                                phtml1+='<li class="active" id=\"'+'p'+(i+1)+'\">';
                            }else {
                                phtml1+='<li id=\"'+'p'+(i+1)+'\">';
                            }
                            phtml1+='<a style="cursor: pointer" onclick=\"'+'pagechange('+(i+1)+')'+'\">'+(i+1)+'</a>'

                            phtml1+='</li>'
                        }
                        pageBarHtml+=phtml1;

                    }else{//此时curPage为最后一组导航
                        var phtml1='';
                        var odd=json.odd;

                        var end=start+odd; //start+odd就ok了

                        for (var i=start;i<end;i++)
                        {
                            if((i+1)==curPage)
                            {
                                phtml1+='<li class="active" id=\"'+'p'+(i+1)+'\">';
                            }else {
                                phtml1+='<li id=\"'+'p'+(i+1)+'\">';
                            }
                            phtml1+='<a style="cursor: pointer" onclick=\"'+'pagechange('+(i+1)+')'+'\">'+(i+1)+'</a>'

                            phtml1+='</li>'
                        }
                        pageBarHtml+=phtml1;

                    }

                }



                if(curPage==pagecount)
                {
                    pageBarHtml+='<li class="disabled"> <a>&raquo;</a></li>';
                }else {
                    pageBarHtml+='<li><a style="cursor: pointer" onclick=\"nextPage('+curPage+')\">&raquo;</a></li>'
                }

                pageBarHtml+='</ul>';

                $('#searchPage').append(pageBarHtml);



            }

        });


    }

    //下一页
    function nextPage(pgnum) {

        $.ajax({
            url: "/web/seckill/searchSeckillByCondition",
            data: {
                "from": pgnum+1
            },
            type: "GET",
            success: function (json) {
                document.getElementById('products').innerHTML = ""; //清空所有商品展示
                var html = ''; //拼接商品展示html
                for (var i = 0; i < json.seckills.length; i++) {

                    html += '<div class="product">'
                    html += '<ul><li>';
                    html += '<div class="pro-img">'
                    html+='<a target="_blank" href=\"'+'/web/seckill/seckillDetail/'+json.seckills[i].seckillId+'\">'
                    html += '<img src=\"'+ json.seckills[i].img + '\" alt="product">';
                    html += '</a></div>'
                    html += '<h3><a href="#">' + json.seckills[i].seckillName + '</a></h3>';
                    html += '<p class="desc">' + json.seckills[i].seckillName + '</p>';
                    html += '<p class="price">'

                    html += '<span>' + json.seckills[i].price + '元</span>';
                    html += '<del>' + 19999 + '</del>'
                    html + '</p>';


                    html += '<div class="review"><a href="#"><span class="msg">秒杀商品</span>';

                    html += ' <span class="auther">商品假一赔十</span></a></div>';


                    html += '</div>';

                }

                $('#products').append(html);

                //修改分页bar

                document.getElementById('searchPage').innerHTML=''; //搜索页div清空

                var pageBarHtml='';

                pageBarHtml+='<ul class="pagination">';

                var curPage=json.curPage;
                var pagecount=json.pagecount;


                var curPageGroup=json.curPageGroup;
                var pageGroup=json.pageGroup;

                if(curPage>1)
                {
                    pageBarHtml+='<li><a style="cursor: pointer" onclick=\"'+'prePage('+curPage+')'+'\">&laquo;</a></li>'
                }else {
                    pageBarHtml+='<li class="disabled"><a>&laquo;</a> </li>';
                }


                if(pagecount<=5)
                {
                    var phtml1='';
                    for (var i=0;i<pagecount;i++)
                    {
                        if((i+1)==curPage)
                        {
                            phtml1+='<li class="active" id=\"'+'p'+(i+1)+'\">';
                        }else {
                            phtml1+='<li id=\"'+'p'+(i+1)+'\">';
                        }
                        phtml1+='<a style="cursor: pointer" onclick=\"'+'pagechange('+(i+1)+')'+'\">'+(i+1)+'</a>'

                        phtml1+='</li>'

                    }
                    pageBarHtml+=phtml1;

                }else {
                    var size=5;
                    var start=size*(curPageGroup-1)     //从哪里开始遍历

                    // console.log("start="+start);

                    //分两种情况，如果不是最后一组导航
                    //为了防止最后一组不足5页的情况，我们需要获取最后一组有多少页
                    if(curPageGroup<pageGroup)
                    {
                        var phtml1='';
                        //因为curPageGroup<pageGroup，所以每一组必定有5页
                        //此时end=start+5
                        var end=start+5;
                        // console.log("end="+end)

                        for (var i=start;i<end;i++)
                        {
                            if((i+1)==curPage)
                            {
                                phtml1+='<li class="active" id=\"'+'p'+(i+1)+'\">';
                            }else {
                                phtml1+='<li id=\"'+'p'+(i+1)+'\">';
                            }
                            phtml1+='<a style="cursor: pointer" onclick=\"'+'pagechange('+(i+1)+')'+'\">'+(i+1)+'</a>'

                            phtml1+='</li>'
                        }
                        pageBarHtml+=phtml1;

                    }else{//此时curPage为最后一组导航
                        var phtml1='';
                        var odd=json.odd;

                        var end=start+odd; //start+odd就ok了

                        for (var i=start;i<end;i++)
                        {
                            if((i+1)==curPage)
                            {
                                phtml1+='<li class="active" id=\"'+'p'+(i+1)+'\">';
                            }else {
                                phtml1+='<li id=\"'+'p'+(i+1)+'\">';
                            }
                            phtml1+='<a style="cursor: pointer" onclick=\"'+'pagechange('+(i+1)+')'+'\">'+(i+1)+'</a>'

                            phtml1+='</li>'
                        }
                        pageBarHtml+=phtml1;

                    }

                }



                if(curPage==pagecount)
                {
                    pageBarHtml+='<li class="disabled"> <a>&raquo;</a></li>';
                }else {
                    pageBarHtml+='<li><a style="cursor: pointer" onclick=\"nextPage('+curPage+')\">&raquo;</a></li>'
                }

                pageBarHtml+='</ul>';



                $('#searchPage').append(pageBarHtml);



            }

        });


    }


    //分页选项change
    function pagechange(pageNum) {

        //刷新分页选中页码
        var old = document.querySelectorAll('#searchPage > ul > li.active')[0];
        var newelem = document.getElementById('p'+pageNum);
        old.classList.remove('active');
        newelem.classList.add('active')



        // var searchPage=document.getElementById('searchPage'); //搜索页div


        $.ajax({
            url: "/web/seckill/searchSeckillByCondition",
            data: {
                "from": pageNum
            },
            type: "GET",
            success: function (json) {
                document.getElementById('products').innerHTML = ""; //清空所有商品展示
                var html = ''; //拼接商品展示html
                for (var i = 0; i < json.seckills.length; i++) {

                    html += '<div class="product">'
                    html += '<ul><li>';
                    html += '<div class="pro-img">'
                    html+='<a target="_blank" href=\"'+'/web/seckill/seckillDetail/'+json.seckills[i].seckillId+'\">'
                    html += '<img src=\"'+ json.seckills[i].img + '\" alt="product">';
                    html += '</a></div>'
                    html += '<h3><a href="#">' + json.seckills[i].seckillName + '</a></h3>';
                    html += '<p class="desc">' + json.seckills[i].seckillName + '</p>';
                    html += '<p class="price">'

                    html += '<span>' + json.seckills[i].price + '元</span>';
                    html += '<del>' + 19999 + '</del>'
                    html + '</p>';


                    html += '<div class="review"><a href="#"><span class="msg">秒杀商品</span>';

                    html += ' <span class="auther">商品假一赔十</span></a></div>';


                    html += '</div>';

                }

                $('#products').append(html);
                //刷新分页bar

                document.getElementById('searchPage').innerHTML=''; //搜索页div清空

                var pageBarHtml='';

                pageBarHtml+='<ul class="pagination">';

                var curPage=json.curPage;
                var pagecount=json.pagecount;


                var curPageGroup=json.curPageGroup;
                var pageGroup=json.pageGroup;

                if(curPage>1)
                {
                    pageBarHtml+='<li><a style="cursor: pointer" onclick=\"'+'prePage('+curPage+')'+'\">&laquo;</a></li>'
                }else {
                    pageBarHtml+='<li class="disabled"><a>&laquo;</a> </li>';
                }

                if(pagecount<=5)
                {
                    var phtml1='';
                    for (var i=0;i<pagecount;i++)
                    {
                        if((i+1)==curPage)
                        {
                            phtml1+='<li class="active" id=\"'+'p'+(i+1)+'\">';
                        }else {
                            phtml1+='<li id=\"'+'p'+(i+1)+'\">';
                        }
                        phtml1+='<a style="cursor: pointer" onclick=\"'+'pagechange('+(i+1)+')'+'\">'+(i+1)+'</a>'

                        phtml1+='</li>'

                    }
                    pageBarHtml+=phtml1;

                }else {
                    var size=5;
                    var start=size*(curPageGroup-1)     //从哪里开始遍历

                    // console.log("start="+start);

                    //分两种情况，如果不是最后一组导航
                    //为了防止最后一组不足5页的情况，我们需要获取最后一组有多少页
                    if(curPageGroup<pageGroup)
                    {
                        var phtml1='';
                        //因为curPageGroup<pageGroup，所以每一组必定有5页
                        //此时end=start+5
                        var end=start+5;
                        // console.log("end="+end)

                        for (var i=start;i<end;i++)
                        {
                            if((i+1)==curPage)
                            {
                                phtml1+='<li class="active" id=\"'+'p'+(i+1)+'\">';
                            }else {
                                phtml1+='<li id=\"'+'p'+(i+1)+'\">';
                            }
                            phtml1+='<a style="cursor: pointer" onclick=\"'+'pagechange('+(i+1)+')'+'\">'+(i+1)+'</a>'

                            phtml1+='</li>'
                        }
                        pageBarHtml+=phtml1;

                    }else{//此时curPage为最后一组导航
                        var phtml1='';
                        var odd=json.odd;

                        var end=start+odd; //start+odd就ok了

                        for (var i=start;i<end;i++)
                        {
                            if((i+1)==curPage)
                            {
                                phtml1+='<li class="active" id=\"'+'p'+(i+1)+'\">';
                            }else {
                                phtml1+='<li id=\"'+'p'+(i+1)+'\">';
                            }
                            phtml1+='<a style="cursor: pointer" onclick=\"'+'pagechange('+(i+1)+')'+'\">'+(i+1)+'</a>'

                            phtml1+='</li>'
                        }
                        pageBarHtml+=phtml1;

                    }

                }



                if(curPage==pagecount)
                {
                    pageBarHtml+='<li class="disabled"> <a>&raquo;</a></li>';
                }else {
                    pageBarHtml+='<li><a style="cursor: pointer" onclick=\"nextPage('+curPage+')\">&raquo;</a></li>'
                }

                pageBarHtml+='</ul>';

                $('#searchPage').append(pageBarHtml);





            }


        })
    }



    function kefu(e) {
        $.ajax({
            url:'/web/chat/HasGotoKefu',
            dataType:'json',
            type:'get',
            success:function(result){

                if(result==true){
                    window.location.href='http://localhost:5677/chat/toChat';
                }else {
                    alert('当前咨询人数过多,客服都忙不过来了,请等会儿再咨询！')
                }

            },
            error:function () {
                alert('您可能还没有登录,请登录!')
            }
        })

    }

</script>


</html>